
{% comment %}
  图片占位样式由各引入文件承载

  规则
    已有section来看，图片断点只有 1023px 和 767px
    只支持 三列 及 以下 的图片布局，超过 三列 的（比如四列，最大宽度是 1920 / 4 = 480，可以通过图片宽度来控制），grid 设为 1
    移动端 sizes 计算 恒定为 100vw， 两列布局的也会按照 100vw 来计算, 更小的图（icon）用图片宽度来限定

  适用

  参数
    desktop_image
    mobile_image
    grid
    max_w
    grid_breakpoints

{% endcomment %}
{%- liquid

  unless grid 
    assign grid = 1
  endunless

  assign full_screen = 1920

  unless max_w
    assign max_w = full_screen
  endunless
  
  assign grid_breakpoints_default = 767
  unless grid_breakpoints
    assign grid_breakpoints = grid_breakpoints_default
  endunless

  assign size = 'sizes = "(min-width: ' | append: max_w | append: 'px) '
  assign max_px = max_w | divided_by: grid | append: 'px, (min-width: ' | append: grid_breakpoints | append: 'px) '
  assign size = size | append: max_px
  assign max_vw = 100 | divided_by: grid | append: 'vw, 100vw"'
  assign size = size | append: max_vw
-%}

<picture >
  {% if mobile_image != blank %}
    <source 
      media="(max-width: {{ grid_breakpoints }}px)" 
      sizes="(max-width: {{ grid_breakpoints }}px) 100vw, {{ grid_breakpoints }}px" 
      srcset="
        {%- if mobile_image.width >= 375 -%}{{ mobile_image | image_url: width: 375 }} 375w,{%- endif -%}
        {%- if mobile_image.width >= 550 -%}{{ mobile_image | image_url: width: 550 }} 550w,{%- endif -%}
        {%- if mobile_image.width >= 750 -%}{{ mobile_image | image_url: width: 750 }} 750w,{%- endif -%}
        {%- if mobile_image.width >= 1200 -%}{{ mobile_image | image_url: width: 1200 }} 1200w,{%- endif -%}
        {%- if mobile_image.width >= 1500 -%}{{ mobile_image | image_url: width: 1500 }} 1500w,{%- endif -%}
        {%- if mobile_image.width >= 1700 -%}{{ mobile_image | image_url: width: 1700 }} 1700w,{%- endif -%}
        {{ mobile_image | image_url }} {{ mobile_image.width }}w">
  {% endif %}
  {% if desktop_image != blank %}
    <img class="object-fit-cover {{ class_name }}"
      {{ size }}
      srcset="
        {%- if desktop_image.width >= 375 -%}{{ desktop_image | image_url: width: 375 }} 375w,{%- endif -%}
        {%- if desktop_image.width >= 550 -%}{{ desktop_image | image_url: width: 550 }} 550w,{%- endif -%}
        {%- if desktop_image.width >= 750 -%}{{ desktop_image | image_url: width: 750 }} 750w,{%- endif -%}
        {%- if desktop_image.width >= 1200 -%}{{ desktop_image | image_url: width: 1200 }} 1200w,{%- endif -%}
        {%- if desktop_image.width >= 1500 -%}{{ desktop_image | image_url: width: 1500 }} 1500w,{%- endif -%}
        {%- if desktop_image.width >= 1920 -%}{{ desktop_image | image_url: width: 1920 }} 1920w,{%- endif -%}
        {%- if desktop_image.width >= 2400 -%}{{ desktop_image | image_url: width: 2400 }} 2400w,{%- endif -%}
        {%- if desktop_image.width >= 3000 -%}{{ desktop_image | image_url: width: 3000 }} 3000w,{%- endif -%}
        {%- if desktop_image.width >= 3840 -%}{{ desktop_image | image_url: width: 3840 }} 3840w,{%- endif -%}
        {{ desktop_image | image_url }} {{ desktop_image.width }}w"
      src="{{ desktop_image | image_url }}"
      loading="lazy"
      width={{ desktop_image.width }}
      height={{ desktop_image.height }}
      alt="{{ desktop_image.alt | escape }}" >
  {% elsif mobile_image != blank %}
      <img class="object-fit-cover {{ class_name }}"
        {{ size }}
        srcset="
          {%- if mobile_image.width >= 375 -%}{{ mobile_image | image_url: width: 375 }} 375w,{%- endif -%}
          {%- if mobile_image.width >= 550 -%}{{ mobile_image | image_url: width: 550 }} 550w,{%- endif -%}
          {%- if mobile_image.width >= 750 -%}{{ mobile_image | image_url: width: 750 }} 750w,{%- endif -%}
          {%- if mobile_image.width >= 1200 -%}{{ mobile_image | image_url: width: 1200 }} 1200w,{%- endif -%}
          {%- if mobile_image.width >= 1500 -%}{{ mobile_image | image_url: width: 1500 }} 1500w,{%- endif -%}
          {%- if mobile_image.width >= 1920 -%}{{ mobile_image | image_url: width: 1920 }} 1920w,{%- endif -%}
          {%- if mobile_image.width >= 2400 -%}{{ mobile_image | image_url: width: 2400 }} 2400w,{%- endif -%}
          {%- if mobile_image.width >= 3000 -%}{{ mobile_image | image_url: width: 3000 }} 3000w,{%- endif -%}
          {%- if mobile_image.width >= 3840 -%}{{ mobile_image | image_url: width: 3840 }} 3840w,{%- endif -%}
          {{ mobile_image | image_url }} {{ mobile_image.width }}w"
        src="{{ mobile_image | image_url }}"
        loading="lazy"
        width={{ mobile_image.width }}
        height={{ mobile_image.height }}
        alt="{{ mobile_image.alt | escape }}" >
  {% endif %}
  {% if desktop_image == blank and mobile_image == blank %} 
    <div class="object-fit-cover img-placeholder h-100">
      {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
    </div>
  {% endif %}
</picture>